<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <div class="ui container" style="padding: 2em;">
        <form name="myForm" class="ui form" onsubmit="return validateForm()" action="/check" method="POST">
            <h4 class="ui dividing header">个人信息</h4>
            <div class="field require ">
                <label><i class="user icon"></i>用户名</label>
                <div class="field">
                    <input type="text" name="username" placeholder="用户名" required="required">
                </div>
            </div>
            <div class="field require ">
                <label><i class="key icon"></i>密码</label>
                <div class="twelve wide field">
                    <input type="password" name="password" placeholder="密码" required="required">
                </div>
                <div class="twelve wide field">
                    <input type="password" name="password_check" placeholder="确认密码" required="required">
                </div>
            </div>
            <div class="field require ">
                <label><i class="envelope icon"></i>邮箱</label>
                <div class="twelve wide field">
                    <input type="text" name="mail" placeholder="邮箱" required="required">
                </div>
            </div>
            <div class="field require ">
                <label><i class="envelope icon"></i>验证码</label>
                <div class="twelve wide field">
                    <input type="text" required="required">
                </div>
            </div>
            <button type="submit" class="ui button">提交</button>
        </form>
        <button onclick="send()">发送验证码</button>
    </div>
    <script th:if="${msg}">
        alert('[[${msg}]]');
    </script>
    <script>
        var patt = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        function validateForm() {
            var p1 = document.forms["myForm"]["password"].value;
            var p2 = document.forms["myForm"]["password_check"].value;
            if (p1 !== p2) {
                alert("两次密码不一样");
                return false;
            }
            var x = document.forms["myForm"]["mail"].value;
            if (!patt.test(x)) {
                alert("不是一个有效的 e-mail 地址");
                return false;
            }
            return true;
        }

        function send() {
            axios.post("/send", { email: document.forms["myForm"]["mail"].value }, {
                header: {
                    'Content-Type': 'application/json'
                }
            });
        }
    </script>
</body>

</html>